<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是登录页面</h1>
    <div class="form">
        用户名：<input type="text" id="username"><br>
        密码：<input type="password" id="password"><br>
        <input type="checkbox" id="remeber"><label for="remeber">记住用户信息</label><br>
        <input type="button" value="登录" id="login">
        <span id="msg"></span>
    </div>
<script src="js/jquery.2.2.4.js"></script>
<script>

    // 读取记住的帐号信息
    let userMsg = localStorage.getItem("userMsg");
    userMsg = userMsg ? JSON.parse(userMsg) : {user:"",pass:""};
    $("#username").val(userMsg.user);
    $("#password").val(userMsg.pass);


    // 登录接口：http://localhost:3000/api?type=login&user=用户名&pass=密码

    $("#login").click(function(){
        $.ajax({
            url:"/api",
            data:{
                type:"login",
                user:$("#username").val(),
                pass:$("#password").val()
            },
            success:res=>{
                console.log(res);
                if(res.code === 200){
                    // 记住帐号
                    if($("#remeber")[0].checked){
                        localStorage.setItem("userMsg",JSON.stringify(res.data))
                    }
                    // 修改提示信息
                    $("#msg").html("登录成功，3秒后跳转到<a href='index.html'>首页</a>");
                    // 真实的跳转
                    setTimeout(() => {
                        location.href = "index.html";
                    }, 3000);

                    // 登录成功之后，为了让其他页面拿到登录成功的状态，存起来
                    sessionStorage.setItem("userState",JSON.stringify(res.data))

                }else if(res.code === 404){
                    $("#msg").html("用户名不存在，请先<a href='register.html'>注册</a>");
                }else if(res.code === 400){
                    $("#msg").html("用户名密码不匹配，请重新输入");
                }
            },
            dataType:"json"
        })
    })


</script>
</body>
</html>